<template>
  <div class="goodspoints">
    <div class="content">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button type="success" plain class="add">添加分类</el-button>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        row-key="cat_id"
        :tree-props="{children: 'children'}"
        height="400"
        style="width: 100%;"
      >
        <el-table-column label="分类名称" prop="cat_name" width="350px"></el-table-column>
        <el-table-column label="级别" prop="cat_level" width="180px">
          <template slot-scope="scope">
            <span v-if="scope.row.cat_level == 0">一级</span>
            <span v-else-if="scope.row.cat_level == 1">二级</span>
            <span v-else>三级</span>
          </template>
        </el-table-column>
        <el-table-column label="是否有效">有效</el-table-column>
        <el-table-column label="操作" prop="desc">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.row.cat_name,scope.row.cat_id)"
              size="mini"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.row.cat_id)"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="num"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>


<script>
import http from "@/api/port.js";
export default {
  data() {
    return {
      tableData: [],
      tableData2: [],
      total: 0,
      currentPage4: 0,
      num: 5
    };
  },
  created() {
    this.datalist();
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.num = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
    },
    datalist() {
      http("categories", {}, "get", { type: 3 }).then(res => {
        this.options = res.data;
        console.log("数据列表", res);
        this.tableData = res.data;
        console.log(this.tableData.length);
        this.total = this.tableData.length;
      });
    }
  }
};
</script>


<style scoped lang="scss">
</style>
